<style>
    .Zi--EyeSlash {
        display: none;
    }
</style>
<div class="main">
    <div class="main_bg">
        <div class="loginBox">
            <div class="my-logo">
                <a href="/"><img src="/Public/common/img/logo_2.png" width="130"></a>
            </div>
            <!-- signContent -->
            <div class="signContent">
                <div class="signContainer">
                    <form action="" class="loginForm layui-form" id="form_key" data-module="smsFrom" onsubmit="return checkForm()">
                        <!-- tab -->
                        <div class="tabBox">
                            <div class="tabBoxSwitch">
                                <ul class="tabBoxSwitchUl">
                                    <li class="tab-active" data-id="0">找回密码</li>
                                </ul>
                                <div class="ercode_tab swicth-ercode" style="width:100px;top:19px;font-size: 16px;">
                                    <a href="/user/login"><i class="layui-icon layui-icon-return"></i> 返回登录</a>
                                </div>
                            </div>
                        </div>

                        <!-- tabContent -->
                        <div class="tabContent">
                            <!-- tabContentAccount -->
                            <div class="tabcont tabContentAccount active">
                                <div class="tabcontent">
                                    <div class="phoneBox">
                                        <div class="phoneGroup">
                                            <button class="phone-btn selectBtn" type="button" data-type="selected">
                                                <span>中国 +86</span>
                                                <svg class="Zi--Select Select-arrow" fill="currentColor"
                                                    viewBox="0 0 24 24">
                                                    <path
                                                        d="M12 16.183l2.716-2.966a.757.757 0 0 1 1.064.001.738.738 0 0 1 0 1.052l-3.247 3.512a.758.758 0 0 1-1.064 0L8.22 14.27a.738.738 0 0 1 0-1.052.758.758 0 0 1 1.063 0L12 16.183zm0-9.365L9.284 9.782a.758.758 0 0 1-1.064 0 .738.738 0 0 1 0-1.052l3.248-3.512a.758.758 0 0 1 1.065 0L15.78 8.73a.738.738 0 0 1 0 1.052.757.757 0 0 1-1.063.001L12 6.818z"
                                                        fill-rule="evenodd"></path>
                                                </svg>
                                            </button>
                                        </div>
                                        <div class="selectConentent">
                                            <div class="selectOptions">
                                            </div>
                                        </div>
                                    </div>
                                    <span class="line-show"></span>
                                    <div class="phoneInputGroup" style="width:auto;">
                                        <label for="" class="inputLabel phoneLabel">
                                            <input type="text" value="" name="mobile" id="mobile"
                                                class="inputStyle phoneInput" placeholder="手机号" autocomplete="off">
                                        </label>
                                    </div>
                                </div>
                                <div class="tabcontent" style="display:none;" id="sendCode">
                                    <div class="phoneInputGroup">
                                        <label for="" class="inputLabel">
                                            <input type="text" maxlength="6" value="" name="code" id="mycode"
                                                class="inputStyle msgInput" placeholder="输入 6 位短信验证码"
                                                autocomplete="off">
                                        </label>
                                    </div>
                                    <div class="phoneGroup">
                                        <button class="phone-btn msgBtn" type="button">
                                            获取短信验证码
                                        </button>
                                    </div>
                                </div>
                                <div class="tabcontent">
                                    <div class="phoneInputGroup">
                                        <label for="" class="inputLabel phoneLabel">
                                            <input type="password" value="" id="password"
                                                class="inputStyle accountPwd" placeholder="新密码" autocomplete="off">
                                        </label>
                                    </div>
                                    <button tabindex="-1" type="button" data-id="password" class="button SignFlow-switchPassword">
                                        <span style="display: inline-flex; align-items: center;">​
                                            <svg class="Zi Zi--Eye Button-zi" fill="currentColor" viewBox="0 0 24 24" width="1.2em" height="1.2em">
                                                <path
                                                    d="M1 11.5C1 15 7 19 12 19s11-4 11-7.5S17 4 12 4 1 8 1 11.5zm11 5c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm-3-5c0 1.66 1.34 3 3 3s3-1.34 3-3-1.34-3-3-3-3 1.34-3 3z"
                                                    fill-rule="evenodd">
                                                </path>
                                            </svg>
                                            <svg class="Zi Zi--EyeSlash Button-zi" fill="currentColor" viewBox="0 0 24 24" width="1.2em" height="1.2em">
                                                <path d="M17.007 11.504c0 .65-.13 1.26-.36 1.83l3 3.073S23 14.136 23 11.504C23 8.008 17.255 4 11.995 4c-1.4 0-2.741.25-3.982.701l2.161 2.16c.57-.23 1.18-.36 1.831-.36a5.004 5.004 0 0 1 5.002 5.003zM2.57 4.342l2.067 2.075C3.499 7.258 1 9.119 1 11.504c0 3.336 5.79 7.503 11.005 7.503 1.55 0 3.031-.3 4.382-.84l.42.42 2.125 2.118s.782.571 1.314 0-.074-1.305-.074-1.305L3.955 3.183s-.76-.742-1.385-.19c-.626.554 0 1.35 0 1.35zm4.963 4.96l1.55 1.552c-.05.21-.08.43-.08.65 0 1.66 1.341 3.001 3.002 3.001.22 0 .44-.03.65-.08l1.551 1.551c-.67.33-1.41.53-2.2.53a5.004 5.004 0 0 1-5.003-5.002c0-.79.2-1.53.53-2.201zm4.312-.78l3.151 3.152.02-.16c0-1.66-1.34-3.001-3.001-3.001l-.17.01z" opacity=".9" fill-rule="evenodd"></path>
                                            </svg>
                                        </span>
                                    </button>
                                </div>
                                <div class="tabcontent">
                                    <div class="phoneInputGroup">
                                        <label for="" class="inputLabel phoneLabel">
                                            <input type="password" value="" id="repassword"
                                                class="inputStyle accountPwd" placeholder="重输密码" autocomplete="off">
                                        </label>
                                    </div>
                                    <button tabindex="-1" type="button" data-id="repassword" class="button SignFlow-switchPassword">
                                        <span style="display: inline-flex; align-items: center;">​
                                            <svg class="Zi Zi--Eye Button-zi" fill="currentColor" viewBox="0 0 24 24" width="1.2em" height="1.2em">
                                                <path
                                                    d="M1 11.5C1 15 7 19 12 19s11-4 11-7.5S17 4 12 4 1 8 1 11.5zm11 5c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm-3-5c0 1.66 1.34 3 3 3s3-1.34 3-3-1.34-3-3-3-3 1.34-3 3z"
                                                    fill-rule="evenodd">
                                                </path>
                                            </svg>
                                            <svg class="Zi Zi--EyeSlash Button-zi" fill="currentColor" viewBox="0 0 24 24" width="1.2em" height="1.2em">
                                                <path d="M17.007 11.504c0 .65-.13 1.26-.36 1.83l3 3.073S23 14.136 23 11.504C23 8.008 17.255 4 11.995 4c-1.4 0-2.741.25-3.982.701l2.161 2.16c.57-.23 1.18-.36 1.831-.36a5.004 5.004 0 0 1 5.002 5.003zM2.57 4.342l2.067 2.075C3.499 7.258 1 9.119 1 11.504c0 3.336 5.79 7.503 11.005 7.503 1.55 0 3.031-.3 4.382-.84l.42.42 2.125 2.118s.782.571 1.314 0-.074-1.305-.074-1.305L3.955 3.183s-.76-.742-1.385-.19c-.626.554 0 1.35 0 1.35zm4.963 4.96l1.55 1.552c-.05.21-.08.43-.08.65 0 1.66 1.341 3.001 3.002 3.001.22 0 .44-.03.65-.08l1.551 1.551c-.67.33-1.41.53-2.2.53a5.004 5.004 0 0 1-5.003-5.002c0-.79.2-1.53.53-2.201zm4.312-.78l3.151 3.152.02-.16c0-1.66-1.34-3.001-3.001-3.001l-.17.01z" opacity=".9" fill-rule="evenodd"></path>
                                            </svg>
                                        </span>
                                    </button>
                                </div>
                                <div class="tabcontent" style="border-bottom:0">
                                    <div class="verify-wrap" id="verify-wrap"></div>
                                    <input type="hidden" id="code" value="" />
                                </div>
                            </div>
                        </div>
                        <!-- loginbox -->
                        <div class="login_box">
                        </div>
                        <button id="submit" type="submit" class="button fromSubmit">重置密码</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="/Public/common/js/slideVerify.js"></script>
<script>
    var token = '<?php echo create_token(time());?>';
    var slideVerify;
    $(function() {
        var SlideVerifyPlug = window.slideVerifyPlug;
        slideVerify = new SlideVerifyPlug('#verify-wrap', {
            wrapWidth: '350',
            initText: '请向右滑动滑块',
            sucessText: '验证通过',
            getSuccessState: function(res) {
                // console.log(res);
                var time = '<?php $curTime = time(); echo $curTime; ?>';
                var token = '<?php echo create_token($curTime);?>'
                if (res) {
                    // var ii = layer.msg('Loading...', {
                    //     icon: 16,
                    //     time: 10000
                    // });
                    $.get('/api/sms/create_code', {
                        token: token,
                        token_time: time
                    }, function(ret) {
                        // layer.close(ii);
                        if (ret.status) {
                            $('#code').val(ret.data);
                            $('#sendCode').show();
                        } else {
                            layer.msg(ret.info);
                        }
                    });
                }
            }
        });

        $('.SignFlow-switchPassword').click(function() {
            var $this = $(this);
            if ($('#' + $this.data('id')).attr('type') == 'password') {
                $('#' + $this.data('id')).attr('type', 'text');
                $this.find('.Zi--Eye').hide();
                $this.find('.Zi--EyeSlash').show();
            } else {
                $('#' + $this.data('id')).attr('type', 'password');
                $this.find('.Zi--Eye').show();
                $this.find('.Zi--EyeSlash').hide();
            }
        });
    });

    Focuss($('#password'), "请输入8到30位密码");
    Blurr($('#password'), "新密码不能为空");
    Focuss($('#repassword'), "请重输密码");
    Blurr($('#repassword'), "重复密码不能为空");
    Focuss($('#mobile'), "请输入注册手机号码");
    Blurr($('#mobile'), "手机号码不能为空");

    function checkForm() {
        var password = $('#password').val();
        var repassword = $('#repassword').val();
        var mobile = $('#mobile').val();
        var code = $('#mycode').val();
        layui.use('layer', function() {
            if (password == '') {
                layer.msg("新密码不能为空~");
                $('#password').focus();
                return false;
            }
            if (password.length < 8 || password.length > 30) {
                layer.msg("密码长度为8到30位~");
                $('#password').focus();
                return false;
            }
            if (repassword == '') {
                layer.msg("重复密码不能为空~");
                $('#repassword').focus();
                return false;
            }
            if (password != repassword) {
                layer.msg("重复密码与原密码不一致~");
                $('#repassword').focus();
                return false;
            }

            if (mobile == '') {
                layer.msg("注册手机号不能为空~");
                $('#mobile').focus();
                return false;
            }

            if (!checkMobile(mobile)) {
                layer.msg("手机号码格式错误~");
                $('#mobile').focus();
                return false;
            }

            if (code == '') {
                layer.msg("验证码不能为空~");
                return false;
            }

            if (code.length != 6) {
                layer.msg("验证码长度为6位~");
                $('#mycode').focus();
                return false;
            }
            var ii = layer.msg('Loading...', {
                icon: 16,
                time: 100000
            });
            $.post('/user/api/repwd', {
                mobile: mobile,
                code: code,
                password: password
            }, function(ret) {
                layer.close(ii);
                if (ret.status) {
                    layer.msg(ret.info, {
                        icon: 1,
                        time: 1000
                    }, function() {
                        if (ret.url) {
                            location.href = ret.url;
                        } else {
                            location.href = "/user/login";
                        }
                    });
                } else {
                    layer.msg(ret.info);
                }
            });
        });

        return false;
    }

    function Focuss(ele, content) {
        ele.focus(function(e) {
            e.preventDefault();
            let _this = $(this);
            _this.parent().removeClass('isShow');
            _this.attr("placeholder", content);
        })
    }

    function Blurr(eleb, contentb) {
        eleb.blur(function(e) {
            e.preventDefault();
            let _this = $(this);
            if (_this.val() == null || _this.val() == "" || _this.val() == undefined) {
                // let content = "请输入短信验证码"
                _this.parent().addClass('isShow').attr('data-content', contentb);
                _this.attr("placeholder", " ");
            } else {
                _this.parent().removeClass('isShow');
            }
        })
    }

    function checkMobile(mobile = '') {
        var myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
        if (!myreg.test(mobile)) {
            // console.log('手机号格式不正确')
            return false;
        } else {
            // console.log('手机号格式正确')
            return true;
        }
    }

    var time = 60;

    // 60s倒计时
    $(".msgBtn").click(function() {
        let pval = $('#mobile').val();
        if (pval == "" || pval == null || pval == undefined) {
            $(".msgBtn").text("获取短信验证码");
            let content = "请输入手机号";
            $('#mobile').parent().addClass('isShow').attr('data-content', content);
            $('#mobile').attr("placeholder", " ");
        } else {
            $(".msgBtn").css("color", "#b7b7b7");
            $(".msgBtn").attr("disabled", true);
            $(".msgBtn").text("正在发送..");
            $.post('/api/sms/send?type=findpwd', {
                mobile: $('#mobile').val(),
                code: $('#code').val()
            }, function(ret) {
                if (ret.status) {
                    getRandom();
                } else {
                    if (ret.info == 'code非法~') {
                        alert('请重新验证~');
                        $(".msgBtn").text("发送短信验证码");
                        $(".msgBtn").css("color", "#175199");
                        $(".msgBtn").attr("disabled", false);
                        slideVerify.resetVerify();
                    } else {
                        alert(ret.info);
                        $(".msgBtn").text("发送短信验证码");
                        $(".msgBtn").css("color", "#175199");
                        $(".msgBtn").attr("disabled", false);
                    }

                }
            });
        }
        // getRandom();
    });

    function getRandom() {
        if (time === 0) {
            $(".msgBtn").text("发送短信验证码");
            $(".msgBtn").css("color", "#175199");
            $(".msgBtn").attr("disabled", false);
            return;
        } else {
            time--;
            $(".msgBtn").text(time + " 秒后可重发");
        }
        setTimeout(function() {
            getRandom();
        }, 1000);
    }
</script>